<template>
  <div>
    <div class="title-row">
      <span class="title-row-bar" />
      灾备数据总量
    </div>
    <div class="panel-group">
      <div class="card-panel total">
        <div class="card-panel-description">
          <div class="card-panel-text">总记录数</div>
          <count-to
            :start-val="0"
            :end-val="totalNum"
            :duration="3000"
            class="card-panel-num"
          />
        </div>
      </div>
      <div class="card-panel orange">
        <div class="card-panel-description">
          <div class="card-panel-text">已验证</div>
          <count-to
            :start-val="0"
            :end-val="verifiedNum"
            :duration="2600"
            class="card-panel-num"
          />
        </div>
      </div>
      <div class="card-panel">
        <div class="card-panel-description">
          <div class="card-panel-text">已完成</div>
          <count-to
            :start-val="0"
            :end-val="successNum"
            :duration="3000"
            class="card-panel-num"
          />
        </div>
      </div>
      <div class="card-panel green">
        <div class="card-panel-description">
          <div class="card-panel-text">已还原</div>
          <count-to
            :start-val="0"
            :end-val="restoredNum"
            :duration="3200"
            class="card-panel-num"
          />
        </div>
      </div>
      <div class="card-panel red">
        <div class="card-panel-description">
          <div class="card-panel-text">失败</div>
          <count-to
            :start-val="0"
            :end-val="failNum"
            :duration="3200"
            class="card-panel-num"
          />
        </div>
      </div>
    </div>

    <div
      id="disasterRecovery"
      style="width: 100%; height: 300px"
    />
  </div>
</template>

<script>
import '@/assets/styles/chartPanel.scss'
import CountTo from 'vue-count-to'
import echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      successNum: 0,
      failNum: 0,
      verifiedNum: 0,
      restoredNum: 0,
      totalNum: 0
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.successNum = 100
      this.failNum = 20
      this.verifiedNum = 20
      this.restoredNum = 10
      this.totalNum = 150
      this.disasterRecoveryChart()
    },
    disasterRecoveryChart() {
      var myChart = echarts.init(document.getElementById('disasterRecovery'))

      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '0',
          data: ['已验证', '已完成', '已还原', '失败']
        },
        calculable: true,
        series: [
          {
            name: '灾备数据总量',
            type: 'pie',
            center: ['50%', '50%'],
            data: [
              {
                value: this.verifiedNum,
                name: '已验证',
                itemStyle: { color: '#F7A94E' }
              },
              {
                value: this.successNum,
                name: '已完成',
                itemStyle: { color: '#3178F4' }
              },
              {
                value: this.restoredNum,
                name: '已还原',
                itemStyle: { color: '#3FDBAB' }
              },
              {
                value: this.failNum,
                name: '失败',
                itemStyle: { color: 'red' }
              }
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
      const erd = elementResizeDetectorMaker()
      erd.listenTo(document.getElementById('disasterRecovery'), (element) => {
        myChart.resize()
      })
    }
  }
}
</script>
